<template>
	<s-layout :title="state.title" :bgStyle="{ color: '#f5f5f5' }">
		<su-tabs
		  :list="tabMaps"
		  :scrollable="false"
		  @change="onTabsChange"
		  :current="state.currentTab"
		  lineColor="#000"
		  :activeStyle="{color: '#000', 'font-weight': '600'}"
		></su-tabs>
		
		<!-- 概况 -->
		<car-info v-if="state.currentTab == 0" :carInfo="state.carInfo" :goodsSwiper="state.goodsSwiper" :carList="state.carList"></car-info>
		
		<!-- 参数pk -->
		<car-parameter-pk v-if="state.currentTab == 1" :carListIds="state.carListIds"></car-parameter-pk>
		
		<!-- 图片 -->
		<car-images v-if="state.currentTab == 2" :carInfo="state.carInfo" :goodsSwiper="state.goodsSwiper"></car-images>
		
		<su-fixed bottom placeholder bg="bg-white" v-if="state.currentTab == 0">
			<view class="bottom-button">
				<view class="item-button button-contrast" @click="goCarPk">
					<view>
						对比
						<text v-if="state.pkListIds.length > 0">({{state.pkListIds.length}})</text>
					</view>
				</view>
				<!-- <view class="item-button button-phone">电话</view> -->
			</view>
		</su-fixed>
	</s-layout>
</template>

<script setup>
	import { reactive, computed } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import _ from 'lodash';
	
	import CarInfo from './components/car-info'
	import CarImages from './components/car-images'
	import CarParameterPk from './components/car-parameter-pk'
	
	const pkCar = sheep.$store('pkCar');
	
	const state = reactive({
		pkListIds: computed(() => pkCar.listIds),
		title: '',
		car_id: '',
		currentTab: 0,
		carInfo: {},
		goodsSwiper: [],
		carList: [],
		carListIds: [],
	})
	const tabMaps = [
		{ name: '概况', value: '1'},
		{ name: '参配', value: '2'},
		{ name: '图片', value: '3'},
	]
	
	async function getCarDetails() {
		const res = await sheep.$api.car.carSku({type: 1, ids: state.car_id})
		state.carInfo = {
			id: state.car_id,
			name: res.data.canpei?.car_details_json.parentname,
			type: Object.values(res.data.type),
			price: res.data.price
		}
		state.goodsSwiper = res.data.image.map(src => ({type: 'image', src}))
		state.carList = res.data.data
		state.carListIds = res.data.data.map(item => item.car_id)
	}
	
	onLoad(async (options) => {
		state.title = options.title
		state.car_id = options.car_id
		getCarDetails()
	});
	
	function onTabsChange(e) {
		state.currentTab = e.index
	}
	
	function goCarPk() {
		sheep.$router.go('/pages/car/car-pk')
	}
</script>

<style lang="scss" scoped>
	
	
	
	.bottom-button {
		padding: 30rpx;
		display: flex;
		
		.item-button {
			width: 351rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #fff;
			border-radius: 100rpx
		}
		.button-contrast {
			width: 100%;
			background: #2d313e;
			// border-radius: 100rpx 0rpx 0rpx 100rpx;
		}
		.button-phone {
			background: #ff6400;
			border-radius: 0rpx 100rpx 100rpx 0rpx;
		}
	}
	
</style>